<script setup>
import ButtonX from '@/components/button-x/index.vue'
import InputX from '@/components/input-x/index.vue'

const props = defineProps({
  modelValue: String,
  placeholder: String,
})
const emit = defineEmits(['update:modelValue', 'search'])
const keyword = ref(props.modelValue)

watch(keyword, newVal => emit('update:modelValue', newVal))

watch(props, (newProps) => {
  if (newProps.modelValue !== keyword.value) {
    keyword.value = newProps.modelValue
  }
})

const search = () => emit('search', keyword)

</script>

<template>
  <input-x v-model="keyword" preicon="fine" :placeholder="props.placeholder" :styles="{ padding: '6rpx 6rpx 6rpx 32rpx', backgroundColor: '#fff' }">
    <template #subfix>
      <view class="baker-list-search-control-bar">
        <button-x size="small" type="primary" @click="search">搜索</button-x>
      </view>
    </template>
  </input-x>
</template>

<style scoped lang="scss">

</style>
